<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换图片练习</title>
    <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img id="img1" src="images/image09.jpg">
    <button id="btn">开始播放</button>
    <button id="btn02">停止播放</button>
</body>
</html>
<script>
    /* 
        使图片可以自动切换
    */

    // 获取 图片 id
    var img1 = document.getElementById("img1");

    // 获取 btn 的id
    var btn = document.getElementById("btn");
    var imag;

    /*
        目前，我们每点击一次按钮，就会开启一个定时器，
            点击多次就会开启多个定时器，这就导致图片的切换速度过快，
            并且我们只能关闭最后一次开启的定时器
    */

    // 在开启定时器之前，需要将当前元素上的其他定时器关闭
    // 为 btn 绑定单击响应函数
    btn.onclick = function(){

        // 开启定时器之前，将上一个定时器关闭 防止多个定时器重叠，速度异常
        clearInterval(imag);

        // 点击开始后 ，开始播放
        imag = setInterval(images,1000);
    };
    
    // 将展示图片路径保存到数组
    var imgArr = ["image01.jpg","image02.jpg","image03.jpg","image04.jpg","image05.jpg","image06.jpg","image07.jpg","image08.jpg"];

    // 计数器，图片索引
    var count = 0;
    function images(){
        // 将图片地址修改为数组中的元素
        img1.src = "images/"+imgArr[count];
        // 自增，使图片变化
        count++;
        if(count >= imgArr.length){
            // 当图片播放到最后一张时，使其归零，从头开始
            count=0;
        }

        /*  当播放到最后一张时，播放停止
            if(count >= imgArr.length){
                clearInterval(imag);
            } 
        */
        return false;
    }
    // 获取 id 为 btn02 的按钮
    var btn02 = document.getElementById("btn02");
    btn02.onclick = function(){
        // 当按下暂停按钮时，停止播放
        clearInterval(imag);
    };

    // 当鼠标移动到图片中时，停止播放
    img1.onmousemove = function(){
        clearInterval(imag);
    };
    // 当鼠标移开时，继续播放
    img1.onmouseout = function(){
        imag = setInterval(images,1000);
    }
    

    
    
</script>